<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    :width="size"
    :height="size"
    :fill="fill"
    :stroke="stroke"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="mindfulness-icon"
  >
    <!-- 头部 -->
    <circle cx="12" cy="7" r="4" />

    <!-- 身体与冥想姿势 -->
    <path d="M4.34 17.34a8 8 0 1 0 15.32 0" />
    <path d="M12 21v-9" />

    <!-- 意识波浪 -->
    <path d="M7.5 12.5Q9 11 12 12t4.5.5" />
    <path d="M7.5 15.5Q9 14 12 15t4.5.5" />

    <!-- 平和光环 -->
    <path d="M12 5a2 2 0 0 0 0-2" />
    <path d="M16 7a5 5 0 0 0 0-2" />
    <path d="M8 7a5 5 0 0 1 0-2" />
  </svg>
</template>

<script setup>
defineProps({
  size: {
    type: [Number, String],
    default: 24,
  },
  fill: {
    type: String,
    default: 'none',
  },
  stroke: {
    type: String,
    default: 'currentColor',
  },
})
</script>

<style scoped>
.mindfulness-icon {
  transition: all 0.3s ease;
}
.mindfulness-icon:hover {
  transform: scale(1.05);
}
</style>
